<template>
  <view class="saved-container">
    <MenuTabs class="menu-tabs" v-model="menuTabsIndex" @change="onChange" />
    <swiper
      class="swiper-box"
      circular
      :current="menuTabsIndex"
      @change="onSwiperChange"
      :style="{ height: swiperHeight + 'px' }"
    >
      <swiper-item>
        <scroll-view
          enhanced
          :show-scrollbar="false"
          scroll-y
          class="card-item-box"
        >
          <s-card
            v-for="(item, index) in itemList"
            :item="item"
            :key="index"
            @detail="onDetail"
          />
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view
          enhanced
          :show-scrollbar="false"
          scroll-y
          class="card-item-box"
        >
          <UserListItem
            v-for="(item, index) in userList"
            :detail="item"
            :key="index"
          />
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view
          enhanced
          :show-scrollbar="false"
          scroll-y
          class="card-item-box"
        >
          <MessageListItem
            v-for="(item, index) in messageList"
            :detail="item"
            :key="index"
          />
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>
<script>
import MenuTabs from './components/menu-tabs.vue';
import UserListItem from './components/user-list-item.vue';
import MessageListItem from './components/message-list-item.vue';

export default {
  name: 'Saved',
  components: {
    MenuTabs,
    UserListItem,
    MessageListItem,
  },
  data() {
    return {
      menuTabsIndex: 0,
      itemList: [
        {
          id: 1,
          username: 'Boy Lee',
          picUrl:
            'https://picx.zhimg.com/v2-ab5998b2315433a05a2cc58877f651e8_im.jpg?source=32738c0c',
          sex: 1,
          star: true,
          type: 1, //1 租客 2 房东
          age: 22,
          count: 2,
          desc: '非常漂亮的两房户型，独立卫生间，冰箱、洗衣机、空调、Wifi、1房间闲置求合租。',
          money: 899,
          payDateType: 1, //1 月度 2季度 3年度
          state: true, // 状态
          time: 7,
          isVerified: true,
          picList: [
            'https://pic1.zhimg.com/80/v2-2296fb2bbd988fc36bbeb3afba87a949_1440w.jpg?source=1940ef5c',
            'https://pic1.zhimg.com/80/v2-2296fb2bbd988fc36bbeb3afba87a949_1440w.jpg?source=1940ef5c',
            'https://pic1.zhimg.com/80/v2-2296fb2bbd988fc36bbeb3afba87a949_1440w.jpg?source=1940ef5c',
            'https://pic1.zhimg.com/80/v2-2296fb2bbd988fc36bbeb3afba87a949_1440w.jpg?source=1940ef5c',
          ],
        },
        {
          id: 2,
          username: 'Susie Jenkins',
          picUrl:
            'https://picx.zhimg.com/v2-ab5998b2315433a05a2cc58877f651e8_im.jpg?source=32738c0c',
          sex: 0, // 0 女 1男 2保密
          star: false,
          type: 1, //1 租客 2 房东
          age: 28,
          count: 1,
          desc: '非常漂亮的两房户型，独立卫生间，1房间闲置求合租。',
          money: 1700,
          payDateType: 2, //1 月度 2季度 3年度
          state: true, // 状态
          time: 7,
          isVerified: true,
          picList: [
            'https://pica.zhimg.com/80/v2-78c68e9e48bda346d1857c534e64029f_1440w.jpg?source=1940ef5c',
            'https://pica.zhimg.com/80/v2-78c68e9e48bda346d1857c534e64029f_1440w.jpg?source=1940ef5c',
            'https://pica.zhimg.com/80/v2-78c68e9e48bda346d1857c534e64029f_1440w.jpg?source=1940ef5c',
            'https://pica.zhimg.com/80/v2-78c68e9e48bda346d1857c534e64029f_1440w.jpg?source=1940ef5c',
          ],
        },
        {
          id: 3,
          username: 'Jeremy Lawrence',
          picUrl:
            'https://picx.zhimg.com/v2-ab5998b2315433a05a2cc58877f651e8_im.jpg?source=32738c0c',
          sex: 0,
          star: false,
          type: 2, //1 租客 2 房东
          age: 22,
          count: 2,
          desc: '非常漂亮的两房户型，独立卫生间，1房间闲置求合租。',
          money: 899,
          payDateType: 1, //1 月度 2季度 3年度
          state: true, // 状态
          time: 7,
          isVerified: true,
          picList: [
            'https://pica.zhimg.com/80/v2-78c68e9e48bda346d1857c534e64029f_1440w.jpg?source=1940ef5c',
            'https://pica.zhimg.com/80/v2-78c68e9e48bda346d1857c534e64029f_1440w.jpg?source=1940ef5c',
            'https://pica.zhimg.com/80/v2-78c68e9e48bda346d1857c534e64029f_1440w.jpg?source=1940ef5c',
            'https://pica.zhimg.com/80/v2-78c68e9e48bda346d1857c534e64029f_1440w.jpg?source=1940ef5c',
          ],
        },
      ],
      userList: [
        {
          name: 'CoCo',
          type: 1,
          pic: 'https://pic1.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_im.jpeg',
          sex: 1,
          age: 12,
        },
        {
          name: 'CoCo',
          type: 1,
          pic: 'https://pic1.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_im.jpeg',
          sex: 1,
          age: 12,
        },
        {
          name: 'CoCo',
          type: 1,
          pic: 'https://pic1.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_im.jpeg',
          sex: 1,
          age: 12,
        },
        {
          name: 'CoCo',
          type: 1,
          pic: 'https://pic1.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_im.jpeg',
          sex: 1,
          age: 12,
        },
        {
          name: 'CoCo',
          type: 1,
          pic: 'https://pic1.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_im.jpeg',
          sex: 1,
          age: 12,
        },
        {
          name: 'CoCo',
          type: 1,
          pic: 'https://pic1.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_im.jpeg',
          sex: 1,
          age: 12,
        },
        {
          name: 'CoCo',
          type: 1,
          pic: 'https://pic1.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_im.jpeg',
          sex: 1,
          age: 12,
        },
        {
          name: 'CoCo',
          type: 1,
          pic: 'https://pic1.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_im.jpeg',
          sex: 1,
          age: 12,
        },
      ],
      messageList: [
        {
          title: '为什么很多人都喜欢住在美国纽约？你应该了解的',
          type: '生活方式',
          pic: 'https://pic1.zhimg.com/v2-f7f80f8e043765df0caf0135f15f0bfa_1440w.jpg',
          time: '8月24日, 2022',
        },
        {
          title: '有没有让你第一眼就觉得很惊艳的风景照？',
          type: '生活方式',
          pic: 'https://pic1.zhimg.com/80/v2-80164e3d80a76b0ded0dbc0f8f075ea6_1440w.jpg?source=1940ef5c',
          time: '8月24日, 2022',
        },
      ],
      swiperHeight: 0,
    };
  },
  created() {},
  mounted() {
    this.initHeight();
  },
  methods: {
    initHeight() {
      const { windowHeight } = uni.getSystemInfoSync(); //结构出当前聊天可视区高度
      this.swiperHeight = windowHeight - 96 / 2; //当前聊天部分的高度
    },
    onChange(v) {
      this.menuTabsIndex = v;
    },
    onSwiperChange({ detail }) {
      this.menuTabsIndex = detail.current;
    },
    onDetail(row) {},
  },
};
</script>
<style>
page{
  background-color: #f6f8ff;
}
</style>
<style lang="scss" scoped>
.saved-container {
  width: 100%;
  height: 100vh;
  .swiper-box {
    height: 100%;
    .card-item-box {
      height: 100%;
      margin-bottom: 100rpx;
    }
  }
}
</style>
